import React from 'react';
import { Menu, Dropdown, Icon, Card, Button, message } from 'antd';
const { SubMenu } = Menu
const menu = (
  <Menu>
    <Menu.Item key='1'>
      点击隐藏
    </Menu.Item>
    <Menu.Item key='2'>
      <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
        2nd menu item
      </a>
    </Menu.Item>
    <Menu.Divider />
    <Menu.Item key='3' disabled>
      {/* 没有打开 没有推荐 提交安全性 */}
      3rd menu item（disabled）
    </Menu.Item>
    <SubMenu title=" sub menu" >
      <Menu.Item key='4'>5d menu item</Menu.Item>
      <Menu.Item key='5'>6th menu item</Menu.Item>
    </SubMenu>
  </Menu>
);

function handleButtonClick(e) {
  message.info('Click on left button.');
  console.log('click left button', e);
}

function handleMenuClick(e) {
  message.info('Click on menu item.');
  console.log('click', e);
}


export default class KimDropdown extends React.Component {

  state = {
    visible: true,
  };

  handleMenuClick = e => {
    message.info(e.key);
    if (e.key === '2') {
      this.setState({ visible: false });
    }
  };

  handleVisibleChange = flag => {
    this.setState({ visible: flag });
  };



  render() {
    const clickableMenu = (
      <Menu onClick={this.handleMenuClick}>
        <Menu.Item key="1">Clicking me will not close the menu.</Menu.Item>
        <Menu.Item key="2">Clicking me will close the menu</Menu.Item>
      </Menu>
    );
    return <>
      <Card title='1、基本用法、分割线和不可用菜单项、默认是移入触发菜单，可以点击触发、多级菜单' style={{ marginTop: 10 }}>
        <Dropdown overlay={menu}>
          <a className="ant-dropdown-link" href="#"> Hover me <Icon type="down" /> </a>
        </Dropdown>

        <Dropdown overlay={menu} trigger={['click']} >
          <a className="ant-dropdown-link" href="#" style={{ marginLeft: 20 }}>
            Click me <Icon type="down" />
          </a>
        </Dropdown>
      </Card>

      <Card title='2、弹出位置' style={{ marginTop: 10 }}>
        <Dropdown overlay={menu} placement="bottomLeft">
          <Button>bottomLeft</Button>
        </Dropdown>
        <Dropdown overlay={menu} placement="bottomCenter">
          <Button>bottomCenter</Button>
        </Dropdown>
        <Dropdown overlay={menu} placement="bottomRight">
          <Button>bottomRight</Button>
        </Dropdown>
        <Dropdown overlay={menu} placement="topLeft">
          <Button>topLeft</Button>
        </Dropdown>
        <Dropdown overlay={menu} placement="topCenter">
          <Button>topCenter</Button>
        </Dropdown>
        <Dropdown overlay={menu} placement="topRight">
          <Button>topRight</Button>
        </Dropdown>
      </Card>


      <style global="true" jsx="true">{` #components-dropdown-demo-dropdown-button .ant-dropdown-button { margin: 0 8px 8px 0; } `}</style>
      <Card title='3、带下拉框的按钮' style={{ marginTop: 10 }}>
        <Dropdown.Button onClick={handleButtonClick} overlay={menu}>
          Dropdown
        </Dropdown.Button>
        <Dropdown.Button overlay={menu} icon={<Icon type="user" />}>
          Dropdown
        </Dropdown.Button>
        <Dropdown.Button onClick={handleButtonClick} overlay={menu} disabled>
          Dropdown
        </Dropdown.Button>
        <Dropdown overlay={menu}>
          <Button>
            Button <Icon type="down" />
          </Button>
        </Dropdown>
      </Card>

      <Card title='4、右键菜单' style={{ marginTop: 10 }}>
        <Dropdown overlay={menu} trigger={['contextMenu']}>
          <span style={{ userSelect: 'none' }}>Right Click on Me</span>
        </Dropdown>
      </Card>

      <Card title='5、菜单隐藏方式' style={{ marginTop: 10 }}>
        <Dropdown
          overlay={clickableMenu}
          onVisibleChange={this.handleVisibleChange}
          visible={this.state.visible}
          placement="bottomLeft"
        >
          <span style={{ userSelect: 'none' }}>Right Click on Me</span>
        </Dropdown>
      </Card>


    </>
  }
}


// API#
// 属性如下

// 参数	                  说明	类型	默认值	版本
// disabled	             菜单是否禁用	boolean	-	
// getPopupContainer	   菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。示例	Function(triggerNode)	() => document.body	
// overlay	             菜单	Menu | () => Menu	-	
// overlayClassName	     下拉根元素的类名称	string	-	3.11.0
// overlayStyle	         下拉根元素的样式	object	-	3.11.0
// placement             菜单弹出位置：bottomLeft bottomCenter bottomRight topLeft topCenter topRight	String	bottomLeft	
// trigger	             触发下拉的行为, 移动端不支持 hover	Array<click|hover|contextMenu>	['hover']	
// visible	             菜单是否显示	boolean	-	
// onVisibleChange	     菜单显示状态改变时调用，参数为 visible	Function(visible)	-	
// overlay               菜单使用 Menu，还包括菜单项 Menu.Item，分割线 Menu.Divider。

// 注意： Menu.Item 必须设置唯一的 key 属性。
// Dropdown 下的 Menu 默认不可选中。如果需要菜单可选中，可以指定 <Menu selectable>.
// Dropdown.Button#
// 参数	                  说明	类型	默认值	版本
// disabled	             菜单是否禁用	boolean	-	
// icon	                 右侧的 icon	ReactNode	-	3.17.0
// overlay	             菜单	Menu	-	
// placement             菜单弹出位置：bottomLeft bottomCenter bottomRight topLeft topCenter topRight	String	bottomLeft	
// size	                 按钮大小，和 Button 一致	string	'default'	
// trigger	             触发下拉的行为	Array<click|hover|contextMenu>	['hover']	
// type	                 按钮类型，和 Button 一致	string	'default'	
// visible	             菜单是否显示	boolean	-	
// onClick	             点击左侧按钮的回调，和 Button 一致	Function	-	
// onVisibleChange	     菜单显示状态改变时调用，参数为 visible	Function	-	
